<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css" rel="stylesheet">
<style type="text/css">
	.animate__animated{
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		background-color: #009688;
		cursor: pointer;
		color: #fff;
		margin: 30px;
		border-radius: 50%;

	}
</style>



<!-- 文档地址 https://animate.style/ -->
<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;overflow: hidden;">
	<li>
		<div class="animate__animated" data-animate='animate__backInDown'>向下进入</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backInLeft'>向左进入</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backInRight'>向右进入</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backInUp'>向上进入</div>
	</li>
</ul>
<ul style="list-style: none;padding: 1px;margin:0;display: flex;justify-content: space-around;flex-wrap: wrap;overflow: hidden;">
	<li>
		<div class="animate__animated" data-animate='animate__backOutDown'>向下走出</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backOutLeft'>向左走出</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backOutRight'>向右走出</div>
	</li>
	<li>
		<div class="animate__animated" data-animate='animate__backOutUp'>向上走出</div>
	</li>
</ul>
<script type="text/javascript">
	$('.animate__animated').click(function(){
		var anthis=$(this),data=anthis.data('animate');
		console.log(anthis.parent().index());
		anthis.removeClass(data);
		setTimeout(function(){
			anthis.addClass(data);
		});
		timeout=setTimeout(function(){
			anthis.removeClass(data);
		},1000);

	})
</script>